<template>
  <div class="app-container">
    <div class="container-fluid">
      <div class="filter-container addList">
        <div style="padding-bottom: 20px" class="at">
          <h3><span>{{ $route.meta.title }} </span>
                   </h3>
                   <h4 v-if='$route.query.months'>

                   <template v-if='typeof($route.query.months) ==="object"'>
                      {{new Date($route.query.months[0]).getFullYear() + '/' + (Number(new Date($route.query.months[0]).getFullYear())+ 1)}}
                   <span style="color:#00468C" :key='i'  v-for="(lists, i) in $route.query.months">{{new Date(lists).toDateString().split(' ')[1]}}</span>
                   </template>
                     <template v-else>
                    {{new Date($route.query.months).getFullYear() + '/' + (Number(new Date($route.query.months).getFullYear())+ 1)}}
                  <span style="color:#00468C"   >{{new Date($route.query.months).toDateString().split(' ')[1]}}</span>
                   </template>
                   </h4>
                 </div>
                 <el-form ref="info" :model="info" :rules="rules" class="event-from">
                   <el-form-item label="" prop="sport">
                     <el-select clearable v-model="info.sport" placeholder="Sport " style="width: 150px">
                       <el-option v-for="(item,i) in list.sportNames" :key="i" :label="item" :value="item" />
                     </el-select>
                   </el-form-item>

                   <el-form-item label="" prop="courseName">
                     <el-select clearable v-model="info.courseName" placeholder="Course Name" style="width: 150px">
                       <el-option v-if='item' v-for="(item,i) in list.courseNames" :key="i" :label="item" :value="item" />
                     </el-select>
                   </el-form-item>

                   <el-form-item label="" prop="title">
                     <el-select clearable v-model="info.title" placeholder="Title " style="width: 150px">
                       <el-option v-if='item' v-for="(item,i) in list.titleNames" :key="i" :label="item" :value="item" />
                     </el-select>
                   </el-form-item>

                   <el-form-item label="" prop="week">
                     <el-select clearable v-model="info.week" placeholder="Day of the Week " style="width: 150px">
                       <el-option v-if='item' v-for="(item,i) in $store.state.app.WeekList" :key="i" :label="item.label" :value="item.value" />
                     </el-select>
                   </el-form-item>

                   <el-form-item label="" prop="venue">
                     <el-select clearable v-model="info.venue" placeholder="Venue " style="width: 150px">
                       <el-option v-if='item' v-for="(item,i) in list.vueueNames" :key="i" :label="item" :value="item" />
                     </el-select>
                   </el-form-item>

                   <el-form-item label="" prop="keyword">
                      <el-input  v-model="info.keyword" placeholder="Name" style="width: 150px" />
                   </el-form-item>


                   <!-- <el-button type="button" class="el-button el-button--success" :loading="buttonDisable" style="height: 40px;" @click="onSubmit('info')"><span>Add</span></el-button> -->
                   <el-button type="button" class="el-button el-button--success" :loading="buttonDisable" style="height: 40px;"
                     @click="fetchData(1)"><span>Search</span></el-button>
                 </el-form>
               </div>
      <el-table v-loading="listLoading" :data="list.list" element-loading-text="Loading" border fit
        highlight-current-row stripe >
        <el-table-column prop="sportName" label="Sport">
          <template slot-scope="scope">
             {{clearInit(scope.row,$set)}}
            <span >{{ scope.row.sportName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="firstName" label="Name">
          <template slot-scope="scope">
            <span>{{scope.row | FilterName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bankDetail" label="Bank Detail" min-width="85">
          <template slot-scope="scope">
            <span :style='scope.row.bankDetail=="Grand-total"?"font-weight: 650;":""'>{{scope.row.bankDetail}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="courseName" label="Course Name">
          <template slot-scope="scope">
            <span>{{ scope.row.courseName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="courseDetails" label="Course Detail">
          <template slot-scope="scope">
            <span>{{ scope.row.courseDetails}}</span>
          </template>
        </el-table-column>

        <el-table-column prop="title" label="Title">
          <template slot-scope="scope">

            <el-select clearable v-show="scope.row.edit" v-model="scope.row.types" placeholder="Sport Select" style="min-width: 120px">
              <el-option v-for="item in EVENT_TYPE" :key="item.value" :label="item.typeName" :value="item.id" />
            </el-select>
            <span v-show="!scope.row.edit">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="venue" label="Venue">
          <template slot-scope="scope">
            <span>{{ scope.row.venue }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dayWeek" label="Day of Week">
          <template slot-scope="scope">
            <span>{{ scope.row.dayWeek }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="upperDate" label="Date">
          <template slot-scope="scope">
            <span>{{ scope.row.upperDate }}</span>
          </template>
        </el-table-column> -->
        </el-table-column>
        <el-table-column prop="totalAmount" label="Total Amount(HKS)">
          <template slot-scope="scope">

            <span :style='scope.row.bankDetail=="Grand-total"?scope.row.totalAmount?"font-weight: 650;":"":""'>{{ scope.row.totalAmount }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="btm-btn-groupss flex-box center">
        <el-button type="success" @click='$router.back(-1)'>Back</el-button>
         <el-button type="success" @click='exportFn'>Export</el-button>
        <el-button type="text">
          <el-pagination layout="sizes, prev, pager, next" :page-size="listQuery.size" :current-page="listQuery.page"
            :page-sizes="[25, 50, 100]" :total="listQuery.total" class="pagination-container" @current-change="handleCurrentChange"
            @size-change="handleSizeChange" />
        </el-button>

      </div>

    </div>
  </div>
</template>

<script>
  import {
    queryAllocationList
  } from '@/api/account.js'

  import {
    addEventScene,
    modifyEventScene,
    delEventScene,
    getEventScene
  } from '@/api/event'

  import {
    getBelongingTypes
  } from "@/api/setting.js"
  export default {
    components: {

    },
    data() {
      return {
        list: {
          list: [],
          monthTotal: {}
        },
        CLASS_TYPE: [],
        local: {

        },
        SPORTS_TYPE: [],
        EVENT_COUNTRY: [],
        buttonDisable: false,
        EVENT_TYPE: [],
        listLoading: true,
        link: '/event/addEdit',
        info: {
          months: '',
          courseName: '',
          name: '',
          sport: '',
          title: '',
          venue: '',
          week: ''
        },
        listQuery: {
          keyword: '',
          page: 1,
          column: '',
          size: 25
        },
        rules: {
          // eventName: [
          //     { required: true, message: 'Event cannot be empty', trigger: 'change' }
          // ],

          // eventProject: [
          //     { required: true, message: '項目 cannot be empty', trigger: 'blur' }
          // ],
          // sport: [
          //     { required: true, message: 'Sport cannot be empty', trigger: 'blur' }
          // ],
          // types: [
          //     { required: true, message: 'Types cannot be empty', trigger: 'blur' }
          // ],
          // participants: [
          //     { required: false, message: 'Participants cannot be empty', trigger: 'blur' }
          // ],
          // countries: [
          //     { required: false, message: 'Countries select', trigger: 'change' }
          // ]
        }
      }
    },
    computed:{
      yearObj(e){
        var yearS = e.$route.query.months[0].split('-');
        let yearSN= Number(yearS[0])
        return yearSN+ '/' + (yearSN+1)
      }
    },

    created() {
      const query = this.$route.query

      this.fetchData()

    },
    methods: {
      fetchData(page,size) {
        let query = this.$route.query
        let months = this.$route.query.months
        months = months&&typeof(months) ==='object'?months.join(','):months
       
        let info = this.info
        info.months = months
        queryAllocationList({
          page:page?page:this.listQuery.page,size:size?size:this.listQuery.size,
          ...info
        }).then(response => {
         // response = this.local
          if (response.status === 0) {
            if(this.listQuery.page>1){
              response.result.sportNames = this.list.sportNames
              response.result.titleNames = this.list.titleNames
              response.result.courseNames = this.list.courseNames
              response.result.vueueNames = this.list.vueueNames

            }
            this.list = response.result
            this.list.monthTotal = {}
            this.listQuery.total = response.result.total ? response.result.total : this.listQuery.total
            // response.result.totalResult.map((list)=>{
            // list.amount =  list.monthTotal
            // })

            this.list.list.unshift({bankDetail:"Grand-total",totalAmount:response.result.totalResult?response.result.totalResult.totalAmount:'0'})
            //this.listQuery.size =this.list.totalPage
            console.log("this.list.listthis.list.list",this.list.list)
            // this.list.sceneList = response.result.list || []
            this.listLoading = false
          }
        })

        // getBelongingTypes({
        //   belonging: 'MISCELLANEOUS'
        // }).then(response => {
        //   const data = response.result
        //   this.SPORTS_TYPE = data.SPORTS_TYPE
        // })
      },
      exportFn(){
        let barName = 'account/'+this.$route.meta.exports
        this.$store.dispatch('app/onExport',{barName,params:{...this.info,token:this.list.exportToken}})
      },
      // pageSize变化事件
      handleSizeChange(val) {

        this.listQuery.size = val
        this.fetchData()
      },
      // pageNum变化事件
      handleCurrentChange(page) {
        this.listQuery.page = page
        this.fetchData()
        // this.trainScheduleList(page, this.activeName)
      },
      sportMedicineFormatLink(row, column) {
        return row.row.id = 1
      }
    }
  }
</script>
<style scoped="scoped" lang="scss">
  .addList {
    .event-from {
      text-align: left;
    }

    .event-from .el-input {
      margin-right: 5px;
    }

    .event-from .el-form-item {
      margin-right: 5px;
      display: inline-block;
    }

    .event-from .el-input input {
      border-radius: 0;
    }
  }

  .addList .at span {
    color: #586982;
    margin-right: 20px;
  }
</style>
